<!--
 * @Description: 增值服务费 - 增值服务费调用审核
 * @Author: liyujie
 * @Date: 2021/08/31
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/08/31
-->
<template>
    <section class="wrapper">
        <div class="content-wrapper">
            <!-- 筛选-->
            <div class="filter-wrapper">
                <div class="left">
                    <div class="filter-item">
                        <el-radio-group
                            v-model="filterData.verify"
                            size="medium"
                            @change="getTableData(1)"
                        >
                            <el-radio-button :label="0">待审核</el-radio-button>
                            <el-radio-button :label="1">已通过</el-radio-button>
                            <el-radio-button :label="-1">未通过</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="filter-item">
                        <div class="filter-item__title">申请时间</div>
                        <el-date-picker
                            v-model="dateTimeRange"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="medium"
                            style="width: 360px"
                            value-format="timestamp"
                            @change="getTableData(1)"
                        />
                    </div>
                </div>
                <div class="right"/>
            </div>
            <!--筛选-->
            <!-- table -->
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                ref="table"
                class="data-table"
                v-loading="tableLoading"
            >
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                    key="0"
                />
                <el-table-column
                    label="申请调用金额"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                    key="1"
                >
                    <template slot-scope="scope">
                        ￥{{ scope.row.money }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="调用对象"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    key="2"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.aim_type === 1">远程任务</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="申请时间"
                    align="left"
                    :formatter="emptyFormatter"
                    key="3"
                >
                    <template slot-scope="scope">
                        {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="verify_admin_true_name"
                    label="操作人"
                    align="center"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    key="4"
                    v-if="filterData.verify"
                />
                <el-table-column
                    prop="verify_fail_reason"
                    label="拒绝原因"
                    align="center"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    key="5"
                    v-if="filterData.verify === -1"
                />
                <el-table-column
                    label="操作"
                    width="160"
                    key="6"
                    v-if="filterData.verify === 0"
                >
                    <template slot-scope="scope">
                        <div class="option-btn-group">
                            <el-button
                                type="text"
                                @click="showVerifyDialog(1, scope.row)"
                            >
                                通过
                            </el-button>
                            <el-button
                                type="text"
                                @click="showVerifyDialog(-1, scope.row)"
                            >
                                拒绝
                            </el-button>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
            <!-- /table -->
            <div class="pagination-wrapper">
                <div/>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    background
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
        <img-preview ref="preview"/>
    </section>
</template>

<script>
import ImgPreview from "@/components/common/img-preview";

export default {
    name: 'VerifyList',
    components: {ImgPreview},
    props: {},
    data() {
        return {
            apply_no: '',
            filterData: {
                shop_no: '',
                verify : 0,
                start_time: '',
                end_time: ''
            },
            tableData: [],
            tableLoading: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            dateTimeRange: [],
            authResult: {}
        };
    },
    computed: {},
    watch: {},
    filters: {},
    mounted() {
        this.authResult = this.$route.meta.authResult;
        this.filterData.shop_no = this.$route.query.shop_no;
        this.getTableData();
    },

    methods: {

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {
            this.tableLoading = true;
            let params = {...this.filterData};

            params.page_id = page || this.page.now_page;
            params.start_time = this.dateTimeRange ? this.dateTimeRange[0] / 1000 : '';
            params.end_time = this.dateTimeRange ? this.dateTimeRange[1] / 1000 : '';
            this.$post('/student/shop_vas_money%5Cget_apply_list', params, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.page = res.data.page;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 显示审核操作弹窗
         * @param action -1拒绝 2 通过
         * @param row
         */
        async showVerifyDialog(action, row) {
            if(!this.authResult.auth_verify) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            // 通过
            if (action === 1) {
                this.$zdConfirm('确认通过该笔增值服务费调用金的申请？', '审核通过提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleVerify(row.apply_no, action);
                });
            } else {
                let reason = await this.$zdPrompt({
                    title: '审核驳回',
                    message: '不通过原因',
                    placeholder: '请输入不通过的原因...',
                });

                if(reason) {
                    this.handleVerify(row.apply_no, action, reason);
                }
            }
        },

        /**
         * 审核
         * @param apply_no
         * @param verify
         * @param verify_fail_reason
         */
        handleVerify(apply_no, verify, verify_fail_reason) {
            let params = {
                apply_no,
                verify,
                verify_fail_reason
            };

            this.$post('/student/shop_vas_money%5Caudit_apply', params, resp => {
                if (resp.code === 1) {
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    flex: 1;

    .content-wrapper {
        display: flex;
        height: 100%;
        flex-direction: column;
        position: relative;
        padding: 0 24px;
        background: #fff;
        box-sizing: border-box;
        /*筛选*/
        /deep/ .filter-wrapper {
            justify-content: space-between;
            .left {
                display: flex;
            }
            .right {
                margin-top: -22px;
            }
        }

        .filter-wrapper {
            flex-shrink: 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 24px;

            .filter-item {
                display: flex;
                align-items: center;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                white-space: nowrap;
                margin-right: 24px;
                margin-bottom: 24px;

                &__title {
                    margin-right: 16px;
                    white-space: nowrap;
                }

                .query-button {
                    width: 84px;
                    height: 36px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    border: 1px solid #1890FF;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #1890FF;
                    margin-right: 12px;
                }
            }
        }

        // 表格
        /deep/ .table-wrapper {
            padding: 0 24px;
            flex: 1;
            height: 0;

            .cell-title {
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-bottom: 12px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 2;
            }

            .cell-content {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 3;
            }

            .cell-tips {
                color: #999;
            }
        }

        /deep/ .data-table {
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            // 操作按钮
            .option-btn-group {
                .el-button {
                    margin-left: 0;
                    margin-right: 10px;
                    padding: 6px 0;
                }
            }
        }

        /deep/ .status-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;

            .status-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;

                &.success {
                    background: #4CD964;
                }

                &.danger {
                    background: #FF3030;
                }

                &.warning {
                    background: #FFA72D;
                }

                &.normal {
                    background: #A6A6A6;
                }
            }
        }

        /* 分页 */

        .pagination-wrapper {
            padding: 12px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-pagination {
                background-color: transparent;
            }
        }

        /deep/ .el-table {
            th {
                background: #f2f2f2 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Medium, PingFang SC !important;
                font-weight: 500 !important;
                color: #333333 !important;
                height: 44px !important;
            }
        }

        /deep/ .el-table__fixed-right {
            right: 6px!important;
        }

        /deep/ .el-radio-button {
            &.is-active {
                .el-radio-button__inner {
                    background: #E6F1FC;
                    color: #20A0FF;
                    border-color: #20A0FF;
                }
            }
            .el-radio-button__inner {
                padding: 10px 24px;
            }
        }
    }
}
</style>
